<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      padding: 10px; 
    }


    .item {
      /* aspect-ratio: 1 / 1;  */
      /* 宽高比 1:1 */
      width: 100%;
      height: 100px;
      /* 撑满格子宽度 */
      background: lightcoral;
      color: white;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }


    /* .item2 {
      grid-column-start: 2;
      grid-column-end: 4;
    } */

    .item2{
      grid-column: 2 / span 2;
      grid-row: 0 / span 2;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item item2">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
    <div class="item">13</div>
    <div class="item">14</div>
    <div class="item">15</div>
    <div class="item">16</div>
    <div class="item">17</div>
    <div class="item">18</div>
  </div>

</body>

</html>